import styles from './index.less';
import {useHistory} from 'react-router-dom';
import {Avatar, Button, Col, List, message, Modal, Statistic, Tabs, Tooltip} from 'antd';
import PageHeader from '@/components/page-header';
import React from 'react';
import util from '@/utils';
import {QuestionCircleOutlined} from '@ant-design/icons';


const query = async () => {
   const {data} = await util.request({
      url: `/shop`
   });
   return data;
};

const queryCustomer = async (wxOpenId: string) => {
   const {data} = await util.request({
      url: `/customer/${wxOpenId}`
   });
   return data;
};

const rewardCustomer = async (shopItemId: number) => {
   const wxOpenId = localStorage.getItem('wxOpenId');
   const data = await util.request({
      url: `/customer/reward`,
      method: 'POST',
      params: {
         wxOpenId, shopItemId
      }
   }) as any;
   if (data.code === 500) {
      message.warning({
         content: data.message,
         key: 11220
      });
   } else {
      return data.data;
   }
};


const rewardMine = async () => {
   const wxOpenId = localStorage.getItem('wxOpenId');
   const {data} = await util.request({
      url: `/customer/reward/${wxOpenId}`
   }) as any;
   return data;
};

export default function ShopPage() {
   const history = useHistory();
   const listState = React.useState<Array<ShopItem>>();
   const customerState = React.useState<Customer>();
   const rewardMineState = React.useState<Array<ShopItem>>();


   React.useEffect(() => {
      const wxOpenId = localStorage.getItem('wxOpenId') as string;
      queryCustomer(wxOpenId).then(res => {
         customerState[1](res);
      });
      query().then(res => {
         listState[1](res);
      });
      rewardMine().then(res => {
         rewardMineState[1](res);
      });
   }, []);

   return <div className={styles.layout}>
      <PageHeader
         onBack={() => history.goBack()}
         title='商城'
      />
      <Tabs defaultActiveKey='1' centered onChange={() => {
      }}>
         <Tabs.TabPane tab='积分商城' key='shop'>
            <div className={styles.statistic}>
               <Statistic title={<b>我的积分 <Tooltip trigger={['click']} title='每听一个讲解积分加5分'>
                  <QuestionCircleOutlined />
               </Tooltip></b>} value={customerState[0]?.reward} />
            </div>
            <List className={styles.list}
                  itemLayout='horizontal'
                  dataSource={listState[0]}
                  renderItem={(item: ShopItem) => (
                     <List.Item>
                        <Col span={21}>
                           <List.Item.Meta
                              avatar={<Avatar src={item.icon} />}
                              title={item.name}
                              description={<div>
                                 <div style={{color: 'black'}}>
                                    <b>积分:{item.reward}</b>
                                 </div>
                                 <div>
                                    {item.represent}
                                 </div>
                              </div>}
                           />
                        </Col>
                        <Col span={3}>
                           <Button size={'small'} type='link' onClick={() => {
                              Modal.info({
                                 title: `需要消耗${item.reward}个积分`,
                                 width: 250,
                                 icon: false,
                                 okText: '确定',
                                 onOk() {
                                    rewardCustomer(item.id).then(res => {
                                       res && customerState[1](res);
                                       rewardMine().then(res => {
                                          rewardMineState[1](res);
                                       });
                                    });
                                 }
                              });
                           }}>
                              兑换
                           </Button>

                        </Col>
                     </List.Item>
                  )}
            />
         </Tabs.TabPane>
         <Tabs.TabPane tab='我的兑换' key='mine'>
            <List className={styles.list}
                  itemLayout='horizontal'
                  dataSource={rewardMineState[0]}
                  renderItem={(item: ShopItem) => (
                     <List.Item>
                        <List.Item.Meta
                           avatar={<Avatar
                              src={item.icon} />}
                           title={item.name}
                           description={<div>
                              <div style={{color: 'black'}}>
                                 <b>积分:{item.reward}</b>
                              </div>
                              <div>
                                 {item.represent}
                              </div>
                           </div>}
                        />
                     </List.Item>
                  )}
            />
         </Tabs.TabPane>
      </Tabs>
   </div>
}
